<template>
    <el-dialog v-model="isOpen" title="变量关系分析结果" :border="true" align-center>
        <el-descriptions column="1" border>
            <el-descriptions-item label="协方差">{{ result.covariance.toLocaleString() }}</el-descriptions-item>
            <el-descriptions-item label="相关系数">{{ result.correlation.toFixed(4) }}</el-descriptions-item>
            <el-descriptions-item label="相关强度">{{ result.strengthDescription }}</el-descriptions-item>
        </el-descriptions>

        <el-divider />

        <div ref="chartContainer" style="width: 100%;height: 400px" />

        <template #footer>
            <div class="dialog-footer">
                <el-button type="primary" @click="isOpen = false">
                    关闭
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup>
import { nextTick, ref, watch } from "vue"
import * as echarts             from "echarts"

let isOpen = defineModel()
let props  = defineProps([ "originalData", "result" ])

let chartContainer = ref(null)
let chartInstance  = ref(null)

watch(isOpen, (val) => {
    if(val){
        initChart()
    }
})

function initChart(){
    nextTick(() => {
        if(!chartContainer.value){
            return
        }
        if(!props.result){
            return
        }
        if(!props.originalData || !props.originalData.xdata || !props.originalData.ydata){
            return
        }

        // 从originalData中获取x和y数据
        const xdata = props.originalData.xdata
        const ydata = props.originalData.ydata

        if(!chartInstance.value){
            chartInstance.value = echarts.init(chartContainer.value)
        }

        // 准备数据 - 将x和y数据组合成散点图所需格式
        const scatterData = xdata.map((x, index) => [ x, ydata[index] ])

        // 简单线性回归方程计算 (y = ax + b)
        const xValues = xdata.map(Number)
        const yValues = ydata
        const n       = xValues.length
        const sumX    = xValues.reduce((a, b) => a + b, 0)
        const sumY    = yValues.reduce((a, b) => a + b, 0)
        const sumXY   = xValues.reduce((sum, x, i) => sum + x * yValues[i], 0)
        const sumX2   = xValues.reduce((sum, x) => sum + x * x, 0)
        const a       = (n * sumXY - sumX * sumY) / (n * sumX2 - sumX * sumX)
        const b       = (sumY - a * sumX) / n

        // 生成回归线数据
        const minX           = Math.min(...xValues)
        const maxX           = Math.max(...xValues)
        const regressionLine = [
            [ minX, a * minX + b ],
            [ maxX, a * maxX + b ],
        ]

        const option = {
            tooltip   : {
                trigger  : "item",
                formatter: (params) => {
                    if(params.seriesType === "scatter"){
                        return `X: ${ params.value[0] }<br/>Y: ${ params.value[1] }`
                    }
                    else{
                        return `回归线: y = ${ a.toFixed(6) }x + ${ b.toFixed(2) }`
                    }
                },
            },
            grid      : {
                left        : "10%",
                right       : "10%",
                bottom      : "15%",
                top         : "10%",
                containLabel: true,
            },
            xAxis     : {
                type     : "value",
                name     : "X变量",
                axisLabel: {
                    formatter: "{value}",
                },
            },
            yAxis     : {
                type: "value",
                name: "Y变量",
            },
            series    : [
                {
                    type      : "scatter",
                    name      : "数据点",
                    data      : scatterData,
                    symbolSize: 10,
                    itemStyle : {
                        color: "#3498db",
                    },
                },
                {
                    type     : "line",
                    name     : "回归线",
                    data     : regressionLine,
                    symbol   : "none",
                    lineStyle: {
                        color: "#e74c3c",
                        width: 2,
                    },
                },
            ],
            annotation: {
                label: {
                    fontSize: 12,
                    color   : "#333",
                },
                data : [
                    {
                        type      : "text",
                        position  : [ "50%", "95%" ],
                        value     : `相关系数: ${ props.result.correlation.toFixed(4) } (${ props.result.strengthDescription })`,
                        xAxisIndex: 0,
                        yAxisIndex: 0,
                    },
                ],
            },
        }

        chartInstance.value.setOption(option)
    })
}
</script>

<style lang="scss" scoped>
</style>
